<template>
  <ul class="rightmenu-container">
   <li v-for="(item,i) in value" :key="i"><span :class="{active:item.isselect}" @click="handelclick(item)">{{ item.name }}</span>
    <rightmenu :value="item.children" @select="handelclick"/>
</li>
  </ul>
</template>

<script>
export default {
    name:"rightmenu",
    props:{
        value:{
            type:Array,
            default:()=>[],
        }
    },
    methods:{
        handelclick(item){
            this.$emit('select',item);
        }
    }
}
</script>

<style lang="less" scoped>
@import '~@/style/var.less';
.rightmenu-container{
    list-style: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    .rightmenu-container{
        margin-left: 1em;
    }
    li{
        min-height: 40px;
        line-height: 40px;
    }
    .active{
        color: @warn;
        font-weight: bold;
    }
}
</style>